<template>
    <view class="mainBox">
        <view class="momentItem" v-for="item in homeMoment" :key="item.id" @click="toDatil(item.id)">
            <view class="imageLayout">
                <image
                    class="img"
                    :src="item.imgList[0]['img_path']"
                    mode="widthFix"
                />
                <view class="likeBox" @click.stop="upvoteFn(item.id)">
                    <image
                        class="likeIcon"
                        :class="item.isUpvote && 'animation'"
                        :src="item.isUpvote? '/static/index/like_s.png' : '/static/index/like_k.png'"
                        mode="scaleToFill"
                    />
                </view>
            </view>
            <view class="title">{{ item.title }}</view>
            <view class="footer">
                <view class="likeCount">
                    <image
                        class="icon"
                        src="@/static/index/like_s.png"
                        mode="scaleToFill"
                    />
                    <view class="count">{{ item.upvoteList.length }}</view>
                    
                </view>

                <view class="time">
                    <image
                        class="icon"
                        src="@/static/index/time.png"
                        mode="scaleToFill"
                    />
                    {{ item.updateTime }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { upvoteApi } from '@/servers/momentServer.js';
import {mapState} from 'vuex'
import storage from '@/utils/storage.js';
import { toast } from '@/common/showTips.js';
import { mapActions } from 'vuex'
export default {
    data() {
        return {
            
        };
    },
    methods: {
        ...mapActions('momentStore', ['getHomeMomentAction']),
        toDatil(id){
            uni.$u.route('/pages_second/momentDetail/momentDetail', {moment_id:id});
        },
        async upvoteFn(moment_id){
            const option = {
                user_id: storage.getCache("userInfo").user_id,
                moment_id
            }
            const res = await upvoteApi(option)
            const {data} = res
            if(data){
                await this.getHomeMomentAction()
                toast({title:"点赞成功~"})
            }
        }
    },
    onLoad() {},
    computed:{
        ...mapState('momentStore' , ['homeMoment'])
    }
};
</script>

<style lang="scss" scoped>
.mainBox {
    padding: 20rpx 64rpx;
    .momentItem {
        border-radius: 50rpx;
        overflow: hidden;
        background: #fff;
        padding-bottom: 48rpx;
        box-shadow: 10rpx 12rpx 4rpx #ccc;
        margin-bottom: 60rpx;

        .imageLayout {
            position: relative;
            .img {
                width: 100%;
            }
            .likeBox {
                position: absolute;
                bottom: 0;
                right: 20rpx;
                background: #fff;
                border-radius: 50%;
                width: 96rpx;
                height: 96rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                box-shadow: 4rpx 4rpx 8rpx #ccc;
                transform: translateY(43%);
                .likeIcon {
                    width: 48rpx;
                    height: 48rpx;
                }
                .animation{
                    animation: like-pulse 2.4s 2;
                    @keyframes like-pulse {
                        0% {
                            transform: scale(1);
                        }
                        50% {
                            transform: scale(1.3);
                        }
                        100% {
                            transform: scale(0.8);
                        }
                    }
                }
            }
        }
        .title {
            color: $blueTheme;
            text-align: center;
            margin-top: 32rpx;
            font-size: 28rpx;
            font-weight: 600;
        }
        .footer {
            display: flex;
            justify-content: space-evenly;
            margin-top: 20rpx;
            .icon {
                margin-right: 10rpx;
                width: 48rpx;
                height: 48rpx;
            }
            .likeCount {
                display: flex;
                align-items: center;
                .count{
                    color: $blueTheme;
                }
            }
            .time {
                display: flex;
                align-items: center;
                color: $blueTheme;
            }
        }
    }
}
</style>
